<template>
    <div class="loading">
        <item title="样式设置">
            <cell>
                <f-loading></f-loading>
            </cell>
            <cell>
                <f-loading type="2"></f-loading>
            </cell>
        </item>

        <item title="大小设置">
            <cell>
                <f-loading size="20px"></f-loading>
            </cell>
            <cell>
                <f-loading size="40px"></f-loading>
            </cell>
        </item>

        <item title="动画粗细">
            <cell>
                <f-loading sizeCell="1"> </f-loading>
            </cell>
            <cell>
                <f-loading sizeCell="6"> </f-loading>
            </cell>
            <br />
            <cell>
                <f-loading type="2" sizeCell="3"> </f-loading>
            </cell>
            <cell>
                <f-loading type="2" sizeCell="6"> </f-loading>
            </cell>
        </item>

        <item title="颜色设置">
            <cell>
                <f-loading color="#E84855"></f-loading>
            </cell>
            <cell>
                <f-loading color="#1B998B"></f-loading>
            </cell>
        </item>

        <item title="文本设置">
            <cell>
                <f-loading>文本居右</f-loading>
            </cell>

            <cell>
                <f-loading textLeft>文本居左</f-loading>
            </cell>
            <br /><br />
            <cell>
                <f-loading vertical>文本居下</f-loading>
            </cell>
        </item>
    </div>
</template>

<script>
import Item from "../components/Item.vue";
import Cell from "../components/Cell.vue";
export default {
    name:"Loading",
    data(){
        return {
        }
    },
    components:{
        Item,
        Cell
    },
}
</script>

<style lang="scss" scoped>
</style>